<template>
  <div>
    <div class="flex justify-center bg-white py-4">
      <div class="w-72 relative">
        <img class="w-40 mx-auto" src="../../../assets/images/hub.png" alt="" />
        <span class="absolute top-8 left-24 text-lg">{{ hub.name }}</span>
        <div class="flex justify-around">
          <a-button type="link" @click="onEdit">设置</a-button>
          <a-button type="link" @click="onDelete">删除</a-button>
          <a-button type="link" @click="onAddSensor">添加传感器</a-button>
        </div>
      </div>
    </div>
    <div class="mt-4 grid grid-cols-3 gap-4">
      <this-sensor
        v-for="item in hub.sensorList"
        :key="item.id"
        :sensor="item"
        @on-delete="$emit('on-delete', $event)"
        @updated="$emit('updated')"
      />
    </div>
    <hub-modal ref="hubM" @updated="$emit('updated')" />
    <sensor-modal ref="senM" @add="addSensor" />
  </div>
</template>
  
  <script>
import thisSensor from './sensor.vue';
import hubModal from './modal/hub.vue';
import { defHttp } from '/@/utils/http/axios';
import { message } from 'ant-design-vue';
import sensorModal from './modal/sensor.vue';

export default {
  props: ['hub'],
  components: { thisSensor, hubModal, sensorModal },
  methods: {
    onEdit() {
      this.$refs.hubM.open(this.hub);
    },
    onDelete() {
      this.$emit('on-delete', {
        type: 'gather-device',
        id: this.hub.id,
      });
    },
    onAddSensor() {
      this.$refs.senM.open({
        channel: '',
        no: '',
        address: '',
        typeId: '',
        companyId: '',
        para: '',
        // projectId: this.hub.projectId,
        // gatherDeviceId: this.hub.id,
        // dtuId: this.hub.dtuId,
        pic: '',
        comment: '',
        // name: '',
      });
    },
    addSensor(form) {
      defHttp
        .post({
          url: '/sensor/add',
          params: {
            ...form,
            projectId: this.hub.projectId,
            gatherDeviceId: this.hub.id,
            dtuId: this.hub.dtuId,
          },
        })
        .then((res) => {
          if (!res.rst) {
            message.error(res.data);
          } else {
            message.success('操作成功');
            this.$emit('updated');
          }
        });
    },
  },
};
</script>
  
  <style>
</style>